<template>
  <n-dropdown
      :options="shortcutMenuOptions"
      trigger="click"
      @select="handleSelect"
  >
    <n-icon :component="Apps" size="24"/>
  </n-dropdown>
</template>

<script setup lang="ts">

import {Apps, BarChart, ExitOutline, Person} from "@vicons/ionicons5";
import {NAvatar, NText} from "naive-ui";
import defaultHeader from "/@assets/header.png";
import {renderIcon} from "/@utils/GlobalFunction";
import router from "/@/router";
import {useUserConfig} from "/@bean/GlobalConfig";
import {reactive, h} from "vue";
import {storeToRefs} from "pinia";


const storesUserConfig = useUserConfig();
const { userInfo } = storeToRefs(storesUserConfig);

const is_superuser = userInfo.value.is_superuser;
const shortcutMenuOptions =reactive([
  {
    key: 'header',
    type: 'render',
    render: () => h(
        "div",
        {
          style: "display: flex; align-items: center; padding: 8px 12px;"
        },
        [
          h(NAvatar, {
            round: true,
            style: "margin-right: 12px;",
            src: userInfo.value.avatar?userInfo.value.avatar:defaultHeader
          }),
          h("div", null, [
            h("div", null, [h(NText, { depth: 2 }, { default: () => userInfo.value.username })]),
            h("div", { style: "font-size: 12px;" }, [
              h(
                  NText,
                  { depth: 3 },
                  { default: () => '用户权限：' + (is_superuser ? '管理员' : '普通用户') }
              )
            ])
          ])
        ]
    )
  },
  {
    label: '个人中心',
    key: 'userInfo',
    icon: renderIcon(Person),
  },
  {
    label: '返回大屏',
    key: 'bigScreen',
    icon: renderIcon(BarChart),
  },
  {
    label: '退出登录',
    key: 'logout',
    icon: renderIcon(ExitOutline),
  }
]);

const handleSelect = (key: string) => {
  if (key === 'logout') {
    storesUserConfig.clearUserInfo()
    router.push({
      path: '/login'
    })
  }else if (key === 'bigScreen') {
    router.push({
      path: '/bigScreen'
    })
  }else if (key === 'userInfo') {
    router.push({
      path: '/userInfo'
    })
  }
}
</script>

<style scoped>

</style>